import React, { useState, useEffect } from 'react';
import { Button, Card } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams } from 'react-router-dom';
import CommodityEditForm from '../../components/CommodityEditForm';

const CommodityEdit: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [isEdit, setIsEdit] = useState(false);

  // 获取URL参数
  const productId = searchParams.get('id');

  // 初始化数据
  useEffect(() => {
    if (productId) {
      setIsEdit(true);
      // TODO: 加载商品数据
    }
  }, [productId]);

  // 处理返回
  const handleBack = () => {
    navigate('/shop/commodity');
  };

  // 处理成功回调
  const handleSuccess = () => {
    navigate('/shop/commodity');
  };

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card style={{ borderRadius: '8px' }}>
        {/* 顶部导航 */}
        <div style={{ marginBottom: '24px' }}>
          <Button
            type="text"
            icon={<ArrowLeftOutlined />}
            onClick={handleBack}
            style={{ fontSize: '16px' }}
          >
            返回
          </Button>
        </div>

        {/* 商品编辑表单 */}
        <CommodityEditForm
          visible={true}
          onCancel={handleBack}
          onSuccess={handleSuccess}
          isEdit={isEdit}
          productData={null} // TODO: 加载商品数据
        />
      </Card>
    </div>
  );
};

export default CommodityEdit;